<template>
  <div v-if="sysType=='MANAGER'" class="container">
    <div class="official-account-list-container">
      <div class="title padding">{{ props.type === 0? '公众号列表' : '小程序列表' }}</div>
      <div class="search">
        <a-input v-model:value="searchName" :placeholder="props.type === 0? '搜索公众号名称' : '搜索小程序名称'" allow-clear @pressEnter="handleSearch" />
      </div>
      <div class="list padding">
        <template v-for="item in officialAccountList">
          <div v-if="item.isShow" :class="{active: item.isActive}" @click="handleClick(item)">{{ item.name+'('+ item.agentName+')' }}</div>
        </template>
      </div>
    </div>
    <div style="width: calc(100% - 300px)">
      <slot />
    </div>
  </div>
  <div v-else class="container">
    <div style="width: calc(100%)">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,watch } from 'vue'
import {$apiAgentLiteGetList} from '@/api/proxy/programManage/liteBanner/index'
import storage from 'store'
import { sm4EncryptByReqData } from '@/utils/encryptUtil'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/store/modules/user'

const emits = defineEmits(['update:value'])
  const userInfo = useUserStore().userInfo
      const sysType = userInfo.sysType
      console.log('sysType',sysType)
      

const props = defineProps({
  type: { type: Number, default: 0 }, // "type":"" 0公众号，1小程序
  appId:'',//传递过来的appid
  isDefault:{
    type:Boolean,
    default:''
  }
}) 
// 公众号列表
const officialAccountList = ref([])
/**
 * 获取公众号列表
 */
const searchData = { type: props.type }

const appidFromRoute = useRoute().query.appId

$apiAgentLiteGetList( searchData).then(res => {

  if(!appidFromRoute){
  //   console.log('走的是这里')
  //   if(props.isDefault){
  //     console.log('1111ssssssss')
  //     console.log(res,555555555555555)
  //     res[0].isActive = true
  //   emits('update:value', res[0])

  //   officialAccountList.value = res.map(item => {
  //   return { ...item, isShow: true }
  // })
  //   }else{
      res[0].isActive = true
    emits('update:value', res[0])
    // }
    
    
  }else{
    
    try {
      res = res.map(item => {
        if(item.appId == appidFromRoute){
          item.isActive = true
          emits('update:value', item)
          
          throw new Error('break')
        }
      })
    } catch (error) { }
  }
  
  officialAccountList.value = res.map(item => {
    return { ...item, isShow: true }
  })
  if(props.type === 0){
    // console.log(res[0].appId ,'存的appid')
    // storage.set('AD',sm4EncryptByReqData({ originData: res[0].appId }).encryptData)
    storage.set('AD', res[0].appId )
  }
})

/**
 * 搜索事件
 */
const searchName = ref('')
function handleSearch(){
  
  if(searchName.value){
  //  过滤公众号列表
    officialAccountList.value.forEach(item => {
      item.isShow = item.name.includes(searchName.value)
    })
}else{
  // 如果搜索框为空，显示所有公众号
    officialAccountList.value.forEach(item => {
      item.isShow = true
    })
  }
}

/**
 * 点击公众号列表项
 */
function handleClick(item: any) {  
  for(let v of officialAccountList.value){
    if(v.isActive){
      v.isActive = false
      break
    }
  }
  item.isActive = true
  
  if(props.type === 0){
    // 搞不懂为什么加密
    // storage.set('AD',sm4EncryptByReqData({ originData: item.appId }).encryptData)
    storage.set('AD', item.appId )

  }
  emits('update:value', item)
}

</script>

<style scoped>
  .container{
    display: flex;
    padding: 24px;
    gap: 20px;
  }
  .official-account-list-container{
    width: 280px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;

    .padding{
      padding: 24px;
    }

    .title{
      font-size: 18px;
      border-bottom: 1px solid #e8e8e8;
    }
    .search{
      margin-top: 24px;
      padding: 0 24px;
    }

    .list{
      div{
        padding: 5px 0;
        text-indent: 2em;
        cursor: pointer;
        &:hover{
          background-color: #f5f5f5;
        }

        &.active{
          background-color: #f5f5f5;
          color: #1965FF;
        }
      }
    }
  }
</style>